<!DOCTYPE html>
{% extends "base.html" %}

{% block title %}
    我的笔记
{% endblock %}

{% block head %}
    <style>
        h1{
            width: 100%;
            height: 100%;
            align-items:center;
            display: -webkit-flex;
            justify-content:center;
            display: -webkit-flex;
            color: #8D8D8D;
        }
    </style>

{% endblock %}

{% block content %}

    <div class="layui-side">
        <div class="layui-side-scroll layui-bg-black">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree  layui-anim layui-anim-upbit "  lay-filter="test">

                {% if g.user.is_active %}
                    <li class="layui-nav-item" id="all_notes">
                        <a href="javascript:;"><span class="layui-icon">&#xe621;{{ g.user.user_name }}的笔记</span></a>
                        <dl class="layui-nav-child", id="note_list">

                        </dl>
                    </li>
                {% endif %}
            </ul>
        </div>

        <div class="layui-body" style="padding: 15px" id="main_content">
            <!-- 内容主体区域 -->
            <!-- 存在笔记且为查看模式 -->
            {#        <div class="layui-container" style="padding: 15px">#}
            {#            <div class="layui-row" id="search_form">#}
            {##}
            {#            </div>#}
            {#        </div>#}
            <div id="layui-row">
                <fieldset class="layui-elem-field layui-field-title layui-card-header">
                    <legend id="note_title"></legend>
                </fieldset>
            </div>
            <div class="layui-container"  id="editor_content" style="height: 100%; width:100%; padding: 15px;text-align: center">

            </div>
        </div>

        <div class="layui-footer layui-anim layui-anim-scale">
            <!-- 底部固定区域 -->
            <div class="layui-btn-container", id="operate_list" style="">

            </div>
        </div>

        <div style="margin: 5%; display: none" id="rename_note">
            <form class="layui-form" id="book" method="post" lay-filter="example">
                <div class="layui-form-item">
                    <input type="text" id="title_text" name="bid" lay-verify="title" autocomplete="off" placeholder="请输入文件名" class="layui-input">
                </div>
            </form>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script src="../static/jquery-3.5.1.min.js"></script>
    <script src="../static/editor.md-master/editormd.min.js"></script>
    <script>
        var user_ID = {{ g.user.user_id }};
        var note_url = '{{ url_for('views.note') }}';
        var note_open_data = {'openID': "0", 'save_status': "0"};
        var editor;
        var $ = layui.jquery
        var layer = layui.layer;
        var element = layui.element;

        load_UI('0');

        function load_note_title(title) {
            $('#note_title').text(title);
        }

        function load_selected_note(collect_ID){
            $('#all_notes').addClass('layui-nav-itemed');
            $.ajax({
                url:'/api/note/other',
                type:'GET',
                async:true,
                data:{'collectID': collect_ID},
                success:function (res) {
                    if(res.code === '200'){
                        var data = res.data;
                        for(var i = data.length - 1;i >= 0;i--){
                            $('#folder' + data[i]).addClass('layui-nav-itemed');
                        }
                        $('#note' + collect_ID).addClass('layui-this');
                    }
                    else{
                        alert(res.msg);
                    }
                },
                error:function f(res) {
                    alert("请求失败！状态码：" + res.status);
                    layer.close(index);
                }
            })
        }

        function get_detail_data(collect_ID) {
            var index = layer.load(1);
            $.ajax({
                url:'/api/note',
                type:"GET",
                async:true,
                data:{'userID': user_ID, 'collectID': collect_ID, 'type': '1'},
                success:function (res) {
                    if(res.code == '200'){
                        var pre_collect_ID = note_open_data['openID'];
                        var pre_collect_status = note_open_data['save_status'];
                        note_open_data['openID'] = collect_ID;
                        note_open_data['save_status'] = '0';
                        var note_detail_data = res.data[0]['text'];
                        if(document.getElementById('editor_content') != null){
                            document.getElementById('editor_content').innerHTML = "";
                        }
                        load_note_button();
                        load_note_title(res.data[0]['title']);
                        load_selected_note(collect_ID);
                        load_editor(note_detail_data);
                        editor = editormd("text-editor", {
                            path: "../static/editor.md-master/lib/"
                        });
                        layer.close(index);
                    }
                    else{
                        alert(res.msg);
                        layer.close(index);
                    }
                },
                error:function f(res) {
                    alert("请求失败！状态码：" + res.status);
                    layer.close(index);
                }
            })
        }

        function load_UI(mode) {
            var note_data;
            var index = layer.load(1);
            $.ajax({
                url: "/api/note/list",
                type: "GET",
                data: {'userID': user_ID},
                async: true,
                success:function (res) {
                    if(res.code == '2002'){
                        add_when_no_data();
                        element.render('body');
                        layer.close(index);
                    }
                    else if (res.code == '200'){
                        note_data = res.data;
                        load_search_form();
                        load_note_button();
                        if(mode == '0'){
                            var collect_id;
                            for(var i = 0;i < note_data.length;i++){
                                if(note_data[i]['type'] === 1 && note_data[i]['parentID'] === '0'){
                                    collect_id = note_data[i]['collectID'];
                                    get_detail_data(collect_id);
                                    break;
                                }
                            }
                        }
                        element.render('body');
                        load_nav(note_data);
                        layer.close(index);
                    }
                    else{
                        layer.msg(res.msg);
                        layer.close(index);
                    }
                },
                error:function f(res) {
                    alert("请求失败！状态码：" + res.status);
                    layer.close(index);
                }
            })
        }

        function add_when_no_data(){
            document.getElementById("editor_content").innerHTML =
                "<div class=\"layui-anim layui-anim-upbit\" style=\"height: 100%; width: 100%; align-items:center; display: -webkit-flex; justify-content:center; display: -webkit-flex;\">\n" +
                "                     <div class=\"layui-container\" >\n" +
                "                         <div style=\"text-align: center;\">\n" +
                "                             <i class=\"layui-icon layui-icon-tips\" style=\"font-size: 30px;color: #1E9FFF;\"></i>\n" +
                "                         </div>\n" +
                "                         <div class=\"layui-card\" style=\"padding: 15px\">\n" +
                "                             <h1 style=\"text-align: center;color: #0C0C0C\">暂时没有笔记</h1>\n" +
                "                         </div>\n" +
                "                         <div class=\"layui-card\" style=\"text-align: center;padding: 15px\">\n" +
                "                            <button type=\"button\" class=\"layui-btn layui-btn-normal\" id=\"add_note_button\">" +
                "                            </button>" +
                "                            <button type=\"button\" class=\"layui-btn layui-btn-normal\" id=\"add_note_folder_button\">" +
                "                            </button>"
            $('#add_note_button').html(
                '<a style=\"color: white\" onclick= add_note(\'0\'' + ',' + '1' + ')> <span class=\"layui-icon\">&#xe61f;</span>新建笔记</a> '
            );
            $('#add_note_folder_button').html(
                '<a style=\"color: white\" onclick= add_note(\'0\'' + ',' + '2' + ')> <span class=\"layui-icon\">&#xe61f;</span>新建笔记文件夹</a> '
            );
        }

        function load_search_form(){
            var $search_div = $('#search_form');
            var $search_form = $('<div class="layui-col-md9"></div>');
            var $search_button = $('<div class="layui-col-md3"></div>');
            var $input_block = $('<div class="layui-input-block"></div>');
            $input_block.append($(' <input type="text" name="title" required  lay-verify="required" placeholder="搜索笔记" autocomplete="off" class="layui-input" style="align: center">'));
            $search_button.append($('<button type="button" class="layui-btn layui-btn-normal">搜索</button>'));
            $search_form.append($input_block);
            $search_form.append($search_button);
            $search_div.append($search_form);
            $search_div.append($search_button);
        }

        function load_editor(detail_data) {
            var $div_main = $('#editor_content');
            var $div_editor = $('<div id="text-editor"></div>');
            var $text_area = $('<textarea style=\"display:none;\"></textarea>');
            $text_area.append(detail_data);
            $div_editor.append($text_area);
            $div_main.append($div_editor);
        }

        function load_note_button(){
            if (document.getElementById('operate_list') != null) {
                document.getElementById('operate_list').innerHTML = "";
            }
            var $button_group = $('#operate_list');
            $button_group.append($('<button id="save_button"    onclick= save_note(note_open_data["openID"])   class="layui-btn layui-btn-normal"  "><span class=\"layui-icon\">&#xe601;</span>保存</button>'))
            $button_group.append($('<button id="export_button"  onclick= export_note(note_open_data["openID"])  class="layui-btn layui-btn-warm"  "><span class=\"layui-icon\">&#xe67d;</span>导出</button>'))
            $button_group.append($('<button id="delete_button"  onclick= del_note(note_open_data["openID"])   class="layui-btn layui-btn-danger"  "><span class=\"layui-icon\">&#xe616;</span>删除</button>'))
            $button_group.append($('<button id="rename_button"  onclick= rename_note(note_open_data["openID"]' + ',' + '1' + ')  class="layui-btn layui-btn"  "><span class=\"layui-icon\">&#xe669;</span>重命名</button>'))
        }

        function load_note(item, parid) {
            if(parid == '0'){
                var $dlp = $('#note_list');
            }
            else{
                var $dlp = $('#nt'+ item['parentID']);
            }
            var $li = $('<li class=\"layui-nav-item\" id=note' + item['collectID'] + '></li>');
            $li.append($('<a id=\"' + item['collectID'] + '\" onclick= get_detail_data(' + item['collectID'] +') ><span class=\"layui-icon\">&#xe621;' + item['title'] + '</span></a>'));
            $dlp.append($li);
        }


        function folder_UI(collect_ID, title) {
            note_open_data["openID"] = collect_ID;
            if(document.getElementById('editor_content') != null){
                document.getElementById('editor_content').innerHTML = "";
            }
            if(document.getElementById('operate_list') != null){
                document.getElementById('operate_list').innerHTML = "";
            }
            var $edit_frame = $('#editor_content');
            var $operate_list = $('#operate_list');
            var $folder_info = $('<h1>' + title + '文件夹</h1>');
            $edit_frame.append($folder_info);
            $operate_list.append($('<button id="add_button" onclick= add_note(note_open_data["openID"]' + ',' + '1' + ')   class="layui-btn layui-btn-normal"  "><span class="layui-icon">&#xe601;</span>新建笔记</button>'));
            $operate_list.append($('<button id="add_folder_button" onclick= add_note(note_open_data["openID"]' + ',' + '2' + ') class="layui-btn layui-btn-warm"  "> <span class=\"layui-icon\">&#xe61f;</span>新建笔记文件夹</button>'));
            $operate_list.append($('<button id="del_folder_button"  onclick= del_note_folder(note_open_data["openID"]) class="layui-btn layui-btn-danger"  "> <span class=\"layui-icon\">&#xe616;</span>删除</button>'));
            $operate_list.append($('<button id="rename_folder_button"  onclick= rename_note(note_open_data["openID"]' + ',' + '2' + ') class="layui-btn layui-btn"  "> <span class=\"layui-icon\">&#xe669;</span>重命名</button>'));
        }

        function load_folder(item, parid) {
            if(parid == '0'){
                var $dlp = $('#note_list');
            }
            else{
                var $dlp = $('#nt'+ item['parentID']);
            }
            var $li = $('<li class="layui-nav-item" id=folder' + item['collectID'] + '  ></li>');
            $li.append($('<a id=\"' + item['collectID'] + '\"  onclick= folder_UI(' + item['collectID'] + ',' + '"' + item['title'] + '"' + ') ><span class=\"layui-icon\">&#xe621;' + item['title'] + '</span></a>'));
            var $dl = $('<dl class=\"layui-nav-child\" id=nt' + item['collectID'] + '></dl>');
            $li.append($dl);
            $dlp.append($li);
        }

        function load_nav(jsondata){
            var index = layer.load(1);
            var $dlp = $('#note_list');
            var $li = $('<li class="layui-nav-item"></li>');
            $li.append($('<a><span class=\"layui-icon\">&#xe631;操作</span></a>'));
            var $dl0 = $('<dl class=\"layui-nav-child\" id=\"nt0\"></dl>');
            $dl0.append($('<dd><a  onclick= add_note(\'0\'' + ',' + '1' + ')> <span class=\"layui-icon\">&#xe61f;</span>新建笔记</a></dd>'));
            $dl0.append($('<dd><a  onclick= add_note(\'0\'' + ',' + '2' + ')> <span class=\"layui-icon\">&#xe61f;</span>新建笔记文件夹</a></dd>'));
            $li.append($dl0);
            $dlp.append($li);
            for(var i = 0; i < jsondata.length;i++){
                var item = jsondata[i];
                if(item['type'] == '1'){
                    load_note(item, item['parentID']);
                }
                else if(item['type'] == '2'){
                    load_folder(item, item['parentID']);
                }
            }
            layer.close(index);
            element.render('nav', 'test');
        }

        function clear_UI() {
            document.getElementById("note_list").innerHTML = "";
            if(document.getElementById("search_form") != null){
                document.getElementById("search_form").innerHTML = "";
            }
            if(document.getElementById("editor_content") != null){
                document.getElementById("editor_content").innerHTML = "";
            }
            if(document.getElementById("operate_list") != null){
                document.getElementById("operate_list").innerHTML = "";
            }
        }

        function save_note(collect_ID) {
            var text = editor.getMarkdown();
            layer.open({
                title:"保存笔记",
                btn: ['确定', '取消'],
                shadeClose: true,
                shade: 0,
                content:"确定保存笔记?",
                yes:function (ind) {
                    var index = layer.load(1);
                    $.ajax({
                        url:'/api/note',
                        type:'PUT',
                        async:true,
                        data:{'userID': user_ID, 'collectID': collect_ID, 'text': text},
                        success:function (res) {
                            if(res.code == '200'){
                                note_open_data['save_status'] = "1";
                                layer.msg('保存成功!');
                                layer.close(index);
                                layer.close(ind);
                            }
                            else{
                                alert(res.msg);
                                layer.close(index);
                            }
                        },
                        error:function f(res) {
                            alert("请求失败！状态码：" + res.status);
                            layer.close(index);
                        }
                    })
                },
                cancel:function () {
                }
            })
        }

        function export_note() {

        }

        function rename_note(collect_ID, file_type) {
            layer.open({
                type: 1,
                title:"重命名",
                btn: ['确定', '取消'],
                shadeClose: true,
                shade: 0,
                content: $("#rename_note"),
                yes:function (ind) {
                    var index = layer.load(1);
                    var title = $('#title_text').val();
                    $.ajax({
                        url:'/api/note/other',
                        type:"PUT",
                        async:true,
                        data:{'userID': user_ID, 'type': file_type, 'collectID': collect_ID, 'title': title},
                        success:function (res) {
                            if(res.code == '200'){
                                layer.msg('重命名成功!');
                                $('#rename_note').css('display', 'none');
                                clear_UI();
                                load_UI("1");
                                if(file_type == '1'){
                                    get_detail_data(res.data['collectID']);
                                }
                                layer.close(index);
                                layer.close(ind);
                            }
                            else{
                                layer.msg(res.msg);
                                layer.close(index);
                            }
                        },
                        error:function f(res) {
                            alert("请求失败！状态码：" + res.status);
                            layer.close(index);
                        }
                    })
                },
                btn2:function (ind) {
                    layer.close(ind);
                    $('#rename_note').css('display', 'none');
                },
                cancel:function () {
                    $('#rename_note').css('display', 'none');
                }
            });
        }
        function del_note_folder(collect_ID) {
            layer.open({
                content: '是否删除该文件夹?',
                btn:['确定', '取消'],
                yes:function () {
                    var index = layer.load(1);
                    $.ajax({
                        url:'/api/note/folder',
                        type:'DELETE',
                        data:{'collectID': collect_ID, 'userID': user_ID},
                        async: true,
                        success:function (res) {
                            if(res.code == '200'){
                                note_open_data['openID'] = "0";
                                note_open_data['note_status'] = "0";
                                layer.msg('删除成功');
                                clear_UI();
                                load_UI("0");
                                layer.close(index);
                            }
                            else{
                                alert(res.msg);
                                layer.close(index);
                            }
                        },
                        error:function f(res) {
                            alert("请求失败！状态码：" + res.status);
                            layer.close(index);
                        }
                    })
                },
                cancel:function () {
                }
            });
        }
        function del_note(collect_ID) {
            layer.open({
                content: '是否删除该笔记?',
                btn:['确定', '取消'],
                yes:function () {
                    var index = layer.load(1);
                    $.ajax({
                        url:'/api/note',
                        type:'DELETE',
                        data:{'collectID': collect_ID, 'userID': user_ID},
                        async: true,
                        success:function (res) {
                            if(res.code == '200'){
                                note_open_data['openID'] = "0";
                                note_open_data['note_status'] = "0";
                                layer.msg('删除成功');
                                clear_UI();
                                load_UI("0");
                                layer.close(index);
                            }
                            else{
                                alert(res.msg);
                                layer.close(index);
                            }
                        },
                        error:function f(res) {
                            alert("请求失败！状态码：" + res.status);
                            layer.close(index);
                        }
                    })
                },
                cancel:function () {
                }
            });
        }
        function add_note(parent_ID, type) {
            var show_collect_ID;
            var index = layer.load(1);
            $.ajax({
                url:'/api/note',
                type: 'POST',
                data: {'userID': user_ID, 'parentID': parent_ID, 'type': type},
                async: true,
                success:function(res){
                    if(res.code === '200'){
                        layer.msg('新建成功!');
                        show_collect_ID = res.data['collectID'];
                        clear_UI();
                        load_UI("1");
                        if(type === 1){
                            get_detail_data(show_collect_ID);
                        }
                        layer.close(index);
                    }
                    else{
                        alert(res.msg);
                        layer.close(index);
                    }
                },
                error:function f(res) {
                    alert("请求失败！状态码：" + res.status);
                    layer.close(index);
                }
            });
        }
    </script>

{% endblock %}